<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/9/6
  Time: 10:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script>
        $(function(){
            $("li").mouseover(function(e){

                $("#d1").show();
                let id=$(this).attr("data-id");

                // jQuery.get(url, [data], [callback], [dataType])
                // url:请求地址
                // data:请求参数,xhr.send(data)
                // callback:回调函数，有参数，参数相当于xhr.responseText
                // dataType:响应数据的类型
                //     text:默认值，响应数据为字符串
                //     json:响应数据为json对象，如果响应的数据是一个JSON格式的字符串，会自动帮我转换成JSON对象
             /*   $.get("${pageContext.request.contextPath}/findById.product?id="+id,function(result){
                    console.log(result);
                },"json");*/


                // jQuery.post(url, [data], [callback], [dataType])
                // url:请求地址
                // data:请求参数,xhr.send(data)
                // callback:回调函数，有参数，参数相当于xhr.responseText
                // dataType:响应数据的类型
                //     text:默认值，响应数据为字符串
                //     json:响应数据为json对象，如果响应的数据是一个JSON格式的字符串，会自动帮我转换成JSON对象
               /* $.post("${pageContext.request.contextPath}/findById.product",{"id":id},function(result){
                    console.log(result);
                },"json");*/

                <%--$.ajax({--%>
                    <%--//请求请求方式:post、get等--%>
                    <%--type:"post",--%>
                    <%--//请求地址--%>
                    <%--url:"${pageContext.request.contextPath}/findById.product",--%>

                    <%--//请求参数--%>
                    <%--data:{"id":$(this).attr("data-id")},--%>
                    <%--//响应数据类型，默认值为text--%>
                    <%--dataType:"json",--%>
                    <%--//响应成功之后调用的回调函数--%>
                    <%--success:function(product){--%>
                        <%--console.log(product);//JSON对象--%>
                        <%--$("#s1").html(product.id);--%>
                        <%--$("#s2").html(product.name);--%>
                        <%--$("#s3").html(product.price);--%>
                        <%--$("#d1").css("left",e.clientX+10);--%>
                        <%--$("#d1").css("top",e.clientY+10);--%>
                    <%--},--%>
                    <%--//响应失败之后调用的函数--%>
                    <%--error:function(e){--%>
                        <%--console.log(e);--%>
                    <%--}--%>
                <%--});--%>

                //该方法就是$.get()方法，只是第四个参数写死了json
                // jQuery.getJSON(url, [data], [callback])
                $.getJSON("${pageContext.request.contextPath}/findById.product",{"id":$(this).attr("data-id")},function(product){
                    console.log(product);//JSON对象
                    $("#s1").html(product.id);
                    $("#s2").html(product.name);
                    $("#s3").html(product.price);
                    $("#d1").css("left",e.clientX+10);
                    $("#d1").css("top",e.clientY+10);
                });


            });
        });
    </script>
</head>
<body>
    <%--查询所有商品:传统的web方式--%>
    <ul>
        <c:forEach items="${products}" var="product">
            <li  data-id="${product.id}">${product.name}</li>
        </c:forEach>
    </ul>
    <%--展示商品详情：使用ajax实现，当鼠标停留在某一个商品上的时候--%>
    <hr>
    <div id="d1" style="background:#ccc;width:200px;height:150px;padding:10px;position: absolute;display: none;">
        商品编号: <span id="s1"></span><br>
        商品名称: <span id="s2"></span><br>
        商品价格: <span id="s3"></span><br>
    </div>

</body>
</html>
